<template>
  <f7-page @page:afterin="backInit">
    <!-- Tabbar for switching views-tabs -->
    <f7-toolbar tabbar labels bottom>
      <f7-link tab-link="#assets" tab-link-active icon-ios="f7:creditcard_fill" icon-aurora="f7:creditcard_fill" icon-md="f7:creditcard_fill" :text="$t('m.tabs.tabsText.assets')"></f7-link>
      <f7-link tab-link="#wealth" id="link-wealth" icon-ios="f7:money_dollar_circle_fill" icon-aurora="f7:money_dollar_circle_fill" icon-md="f7:money_dollar_circle_fill" :text="$t('m.tabs.tabsText.wealth')"></f7-link>
      <f7-link tab-link="#find" icon-ios="f7:compass_fill" icon-aurora="f7:compass_fill" icon-md="f7:compass_fill" :text="$t('m.tabs.tabsText.find')"></f7-link>
      <f7-link tab-link="#my" icon-ios="f7:person_alt" icon-aurora="f7:person_alt" icon-md="f7:person_alt" :text="$t('m.tabs.tabsText.my')"></f7-link>
    </f7-toolbar>

    <f7-tabs>
      <f7-tab id="assets" tab-active>
        <assets-page></assets-page>
      </f7-tab>
      <f7-tab id="wealth">
        <wealth-page></wealth-page>
      </f7-tab>
      <f7-tab id="find">
        <find-page></find-page>
      </f7-tab>
      <f7-tab id="my">
        <my-page ref="my"></my-page>
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>

<script>
  import AssetsPage from './assets'
  import WealthPage from './wealth'
  import FindPage from './find'
  import MyPage from './my'
  import {getToken} from "../../utils/auth";
  export default {
    name: "tabs",
    methods: {
      backInit(data) {
        if(getToken()) this.$refs.my.init();
      }
    },
    components: {
      AssetsPage,
      WealthPage,
      FindPage,
      MyPage
    }
  }
</script>

<style scoped>

</style>
